<template>
  <div>
      <!-- 返回按钮 -->
      <div class="backYest" @click="backYest">
          <img src="navtopIcon/back.png">
      </div>
      <!-- swiper轮播 -->
      <Swipe :autoplay="autoplay"  :width="width" :height="height">
        <SwipeItem v-for="(item,index) in detailList" :key="index" @click="big(item)">
          <img :src="item.pic" :style="swiperSty">
        </SwipeItem>
      </Swipe>
      <div class="desc_container">
        <div class="name_item">{{descList.characteristic}}</div>
        <div class="name_desc">{{descList.name}}</div>
        <div class="price_item">
          <div class="price_item_left">低价{{descList.minPrice}}</div>
          <div class="price_item_right">库存{{descList.stores}}</div>
        </div>
      </div>
      <!-- ==== -->
      <div class="content_container" v-html="content"></div>
      <div>
        <van-goods-action>
          <van-goods-action-icon icon="chat-o" @click="toCart" text="购物车" />
          <van-goods-action-icon icon="shop-o" text="店铺" />
          <van-goods-action-button color="#be99ff" type="warning" @click="showProps" text="加入购物车" />
          <van-goods-action-button color="#7232dd" type="danger" @click="showProps" text="立即购买" />
        </van-goods-action>
        <!-- 自定义图标 -->
        <van-popup
          v-model="show"
          closeable
          close-icon="close"
          position="bottom"
          :style="{ height: '60%' }"
        >
        <!-- 左图又文 -->
          <button class="button" @click="goCarts">加入购物车</button>
          <div class="tops">
            <img :src="descList.pic" alt style="width:100px;height:100px" />
            <div>
              <p style="height:70px;margin:0 5px">{{descList.name}}</p>
              <p style="color:red;margin:0 5px">{{descList.minPrice}}</p>
            </div>
          </div>
          <div class="cens">
            <p style="margin:5px 5px">{{descList.statusStr}}</p>
            <div>
              <p
                :class="{'active':isActive=='reds'}"
                @click="changeColor('reds')"
              >{{detailLists[0].childsCurGoods[0].name}}</p>
              <p
                :class="{'active':isActive=='blue'}"
                @click="changeColor('blue')"
              >{{detailLists[0].childsCurGoods[1].name}}</p>
            </div>
          </div>
        </van-popup>
      </div>
  </div>
</template>

<script>
import COMM from "../../store/constant"; 
import mixin from "../../store/store"
import MANA from "../../storage/constant";
import PATH from "../../router/constant";
// 按需引入
import Vue from 'vue';
import { Swipe, SwipeItem ,ImagePreview} from 'vant';
import 'vant/lib/index.css';

Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  mixins:[mixin],
    data(){
        return{
            detailList:[],
            descList:[],
            detailLists:[],
            content:[],
            show:false,
            colors: "",
            isActive: "reds",
        }
    },
    computed:{
      swiperSty:function(){
        return {
          width:"100%",
          height:"350px"
        }
      },
  },
  // 接收参数
  props:{
    // 自定义属性
    autoplay:{
      type:Number | String,
      default:1000
    },
    width:{
      type: String,
      default:'auto'
    },
    height:{
      type: String,
      default:'auto'
    },
  },
  // 注册
  components:{
    Swipe,
    SwipeItem
  },
    mounted(){
        let id = this.$route.query.id
        this.$CLIENT.getBargDetail({
            params:{
                id:id
            }
        }).then(res=>{
            this.content = res.data.data.content;
            this.descList = res.data.data.basicInfo;
            this.detailList = res.data.data.pics;
            this.detailLists = res.data.data.properties;
        })
    },
    methods:{
        backYest(){
            window.history.back()
        },
        big(item){
          ImagePreview([item.pic])
        },
        showProps(){
          // console.log(this.$storage.getToken(MANA.TOKEN))
          this.show = !this.show;
        },
        goCarts(){
          if(localStorage.getItem("token")){
            this.$toast("加入购物车成功√");
            this.addCartItem(this.descList);
            // this.$router.goNext(PATH.CART)
          }else{
            this.$toast("请先登录用户信息∑≈˚∆˚∑");
            this.$router.goNext(PATH.LOGIN)
          }
        },
        changeColor(el){
          this.isActive = el
        },
        add(){
          this.plusCount();
        },
        sub(){
          this.minisCount();
        },
        toCart(){
          this.$router.goNext(PATH.CART)
        }
    }
}
</script>

<style scoped>
.backYest
{
    position: fixed;
    top: 10px;
    left: 5px;
    z-index: 99 !important;
    width: 40px;
    height: 40px;
    background-color: rgba(255,255,255,.5);
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.content_container
{
  overflow: hidden;
}

.backYest img
{
  width: 60%;
  height: 60%;
}

.desc_container
{
  width: 100%;
  height: 100px;
  border-bottom: 10px solid #dedede;
  padding: 0 20px;
  box-sizing: border-box;
}

.name_item
{
  flex: 1;
  height: 40%;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
}

.name_desc
{
  height: 30%;
  font-size: 14px;
  color: #dedede;
}

.price_item
{
  flex: 1;
  width: 100%;
  height: 30%;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}

.price_item_left
{
  color: red;
  font-size: 14px;
}

.price_item_right
{
  font-size: 15px;
  color: #dedede;
}

/* 弹出层 */
.cens 
{
  overflow: hidden;
  width: 100%;
  height: 160px;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
}
.cens div 
{
  display: flex;
}

.cens div p 
{
  margin: 5px;
}

.tops 
{
  width: 100%;
  height: 140px;
  /* background: skyblue; */
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  padding: 0 5px;
}

.button 
{
  width: 100%;
  height: 70px;
  background: #b7282e;
  color: white;
  border: none;
  outline: none;
  position: fixed;
  bottom: 0rem;
}

.active 
{
  border: 1px solid red;
}

.wrap 
{
  width: 100%;
  height: 100%;
}

.top 
{
  position: fixed;
  top: 0px;
  z-index: 11;
  width: 100%;
  height: 70px;
  background: white;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 5px;
  align-items: center;
}

.active
{
  color: #ff5000;
}

.top span 
{
  font-size: 25px;
}
</style>